<template>
	<view class="chat-body">
		<view class="container">
			<view class="feedback-top" @click="goToRecord()">
				<image class="feedback-img" src="/static/images/feedback.png"></image>
				<view class="feedback-label">我的反馈记录 </view>
				<view class="icon-line"> <u-icon name="arrow-right"></u-icon></view>
			</view>
			<!-- 消息列表 -->
			<scroll-view scroll-y="true" class="message-list" :scroll-into-view="messageId" scroll-with-animation>
				<view v-for="(msg, index) in messages" :key="index" class="message-item " :class="msg.role"
					:id="'message'+index">
					<!-- <view :id="msg.id"> -->
					<view v-if="msg.role=='user'" class="row-user">
						<view class="img-role"></view>
						<text class="message content-user">{{ msg.content }}</text>
						<image class="img-role" src="/static/images/visit.png"></image>
					</view>
					<view v-else class="row-assistant">
						<image class="img-role" src="/static/images/zhushou.png"></image>
						<text class="message content-doc">{{ msg.content }}</text>
						<view class="img-role"></view>
					</view>
					<!-- </view> -->
				</view>
			</scroll-view>
			<view class="bottom-serve">
				<view class="chat-question">
					<u-icon name="volume" class="chat-vioce" size="32"></u-icon>
					<view class="chat-out-input">
						<u-input class="chat-input" placeholder="请输入文字..." v-model="question">
						</u-input>
					</view>
					<u-icon name="photo" class="photo" size="32"></u-icon>
					<u-icon name="plus-circle" class="plus-circle" size="32"></u-icon>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
	} from 'vuex'

	export default {
		data() {
			return {
				question: '',
				messages: [{
					role: 'user',
					content: "123123吃撒迪卢克时间段拉数据溜达鸡阿拉手打"
				}, {
					role: 'doc',
					content: "test12312a吃撒迪卢克时间段拉数据溜达鸡阿拉手打3"
				}],
				messageId: '',
				list: [],
				current: -1,
				count: 0,
				timer: null,
				keyWord: "",
			}
		},
		computed: {
			...mapGetters(["hostApi"]),
		},
		mounted() {

		},
		methods: {
			goToRecord() {
				uni.$u.route('/pages/passwordAndFeedback/FeedbackRecord');
			}
		},
	}
</script>
<style scoped>
	.chat-body {
		height: 100vh;
		background-color: #F7F7F7;
		padding: 32rpx;
	}

	.feedback-top {
		display: flex;
		justify-content: flex-start;
		padding: 40rpx;
		font-weight: 400;
		color: #000;
		font-size: 32rpx;
		background-color: #F0F4FC;
		border-bottom: 2rpx solid #F3F3F3;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.feedback-label {
		margin-left: 24rpx;
	}

	.icon-line {
		position: absolute;
		left: 686rpx;
		top: 48rpx;

	}

	.feedback-img {
		width: 56rpx;
		height: 50rpx;
	}

	.bottom-serve {
		background-color: #F2F2F2;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.chat-question {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border: 1px solid gray; */
		/* border-radius: 10px 10px 0 0; */
		/* background-color: rgb(242, 242, 242); */
		padding: 10px;
	}

	.chat-vioce {}

	.chat-out-input {
		flex: 1;
		background-color: white;
		padding: 0 10px;
		border-radius: 15px;
	}

	.chat-input {
		border: none;
	}


	.container {
		height: 80vh;
	}

	.message-list {
		height: 70vh;
		vertical-align: bottom;
		padding-top: 140rpx;
	}

	.img-role {
		width: 104rpx;
		height: 104rpx;
	}

	.row-user {
		display: flex;
		justify-content: flex-end;
	}

	.row-assistant {
		display: flex;
		justify-content: flex-start;
	}

	.message {
		max-width: 70%;
		padding: 10px 15px;
		margin-bottom: 10px;
		border-radius: 18px;
		position: relative;
		word-wrap: break-word;
	}

	.content-user {
		padding: 28rpx 50rpx;
		display: flex;
		justify-content: flex-end;
		background: #1D77FF;
		color: white;
		font-size: 32rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		border-radius: 64rpx 64rpx 0rpx 64rpx;
	}

	.content-doc {
		width: auto;
		padding: 28rpx 50rpx;
		margin: 4px;
		margin-left: 4px;
		border-radius: 10px;
		position: relative;
		float: left;
		color: #333;
		font-size: 32rpx;
		font-weight: 400;
		background: #FFFFFF;
		border-radius: 0rpx 64rpx 64rpx 64rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
	}
</style>